<template>
    <div>
        <div class="search-container">
            <el-form ref="searchRef" :inline="true">

                <el-form-item label="姓名">
                    <el-input v-model="projectName2" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="projectName2" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="部门">
                    <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="职务">
                    <el-select v-model="value" placeholder="Select" size="large" style="width: 240px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="创建人">
                    <el-input v-model="projectName2" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="value1" type="date" placeholder="请选择时间" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">查询</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="search-container">
            <div style="display: flex;">
                <el-button type="primary" @click="dialogVisible = true">新增</el-button>
                <el-button type="primary" style="margin-left: 20px;">删除</el-button>
                <el-button type="primary">导出</el-button>
                <el-button type="primary">导入</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="index" label="姓名" />
                <el-table-column prop="name" label="手机号" />
                <el-table-column prop="reportnum1" label="部门" />
                <el-table-column prop="reportnum2" label="职务" />
                <el-table-column prop="reportnum3" label="角色" />
                <el-table-column prop="reportnum4" label="创建人" />
                <el-table-column prop="reportnum5" label="创建时间" />
                <el-table-column prop="reportnum9" label="操作" width="300">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="openDiagle(scope.row)">
                            详情
                        </el-button>
                        <el-button type="primary" size="small" @click="mimadialogVisible = true; projectName11 = ''">
                            重置密码
                        </el-button>
                        <el-button type="primary" size="small" @click="openDiagle(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="primary" size="small">
                            删除
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px;margin-bottom: 20px;display: flex;justify-content: center;">
                <el-pagination background layout="prev, pager, next,jumper" :total="2" />
            </div>

            <el-dialog v-model="mimadialogVisible" title="新增">
                <el-form ref="searchRef" label-width="150">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="新密码">
                                <el-input v-model="projectName11" style="width: 240px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <!-- <el-form-item label="手机号码">
                                <el-input v-model="projectName12" style="width: 240px;"></el-input>
                            </el-form-item> -->
                        </el-col>
                    </el-row>

                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="mimadialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="mimadialogVisible = false">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>


            <el-dialog v-model="dialogVisible" title="新增">
                <el-form ref="searchRef" label-width="150">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="姓名">
                                <el-input v-model="projectName11" style="width: 240px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="手机号码">
                                <el-input v-model="projectName12" style="width: 240px;"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="部门">
                                <el-input v-model="projectName13" style="width: 240px;"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="职务">
                                <el-input v-model="projectName14" style="width: 240px;"></el-input>

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="角色">
                                <el-input v-model="projectName15" style="width: 240px;"></el-input>

                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                        </el-col>
                    </el-row>

                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>

            <el-dialog v-model="resultdialogVisible" title="查看结果" width="800">
                <div>
                    <img src="../../assets/img/5.png" />
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="resultdialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="resultdialogVisible = false">
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
import { PropType, ref } from 'vue';
const resultdialogVisible = ref(false)
const projectName = ref('')
const value = ref('')
const value1 = ref('')
const projectName2 = ref('')

const projectName11 = ref('')
const projectName12 = ref('')
const projectName13 = ref('')
const projectName14 = ref('')
const projectName15 = ref('')
const openDiagle = (item) => {
    dialogVisible.value = true;
    projectName11.value = item.index;
    projectName12.value = item.name;
    projectName13.value = item.reportnum1;
    projectName14.value = item.reportnum2;
    projectName15.value = item.reportnum3;
}

const mimadialogVisible = ref(false)

const tableData = ref([
    {
        index: '李红',
        name: '13526777777',
        num: 'A检测',
        reportnum: '1',
        reportnum1: '销售部',
        reportnum2: '组长',
        reportnum3: '销售组长',
        reportnum4: 'admin',
        reportnum5: '2022-01-19 10:37',
        reportnum6: 'admin',
        reportnum7: '2022-01-19 10:37',
        reportnum8: '晶',
        reportnum9: '晶',
    },
])

const dialogVisible = ref(false)
const options = [
    {
        value: '项目1',
        label: '项目1',
    },
    {
        value: '项目2',
        label: '项目2',
    },
    {
        value: '项目3',
        label: '项目3',
    },
    {
        value: '项目4',
        label: '项目4',
    },
    {
        value: '项目5',
        label: '项目5',
    },
]
const drawer = ref(false)

const scantableData = ref([{
    index: '试剂文件',
    name1: '试剂文件1',
    name2: '80M',
    name3: '试剂',
    name4: '.dat',
    name5: '546',
    name6: '0x18',
    name7: '1.0',
    name8: '96%',
    name9: '145',
    name10: '326kB',
    name11: '2022-01-19 10:37',
    name12: '成功',
}])
</script>
<style scoped>
.search-container {
    padding: 20px 30px 0;
    background-color: #fff;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px
}
</style>